<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-2D转换</title>
    <style>
        /* 通过 css3 的 transform 转换，我们能够对元素进行移动、缩放、旋转、斜切等操作
           2D 移动 translate() 使用该函数，可以把元素从原来的位置移动，移动位置参照元素的左上角
            语法: transform: translate(tx) || translate(tx, ty)
                tx 是代表 X 轴(横坐标) 移动的向量长度，当值为正值时，元素向X轴右方向移动，反之
                    元素向X轴左方向移动
                ty 是代表 Y 轴(纵坐标) 移动的向量长度，当值为正值时，元素向Y轴下方向移动，反之
                    元素向Y轴上方向移动 如果 ty 没有显示设置时，默认值为 0
                也可以使用 translate(tx) 或者 translate(ty)
            特点：
                移动位置参照元素的左上角
                执行完成之后会恢复到原始状态
        */
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 添加过渡效果 */
            transition: transform 2s;
        }

        div:active {
            /* 一个参数代表 x 方向 两个参数 代表 x和y 两个方向 */
            /* transform: translate(300px); */
            /* transform: translate(300px, 400px); */
            /* 只需要向Y轴方向移动 */
            /* transform: translate(0px, 200px); */

            /* 只需要向单个方向移动
                translateX()
                translateY()
                translateZ()
            */
            transform: translateY(200px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>